<template>
	<el-header :class="headerClass">
		<div @click="Collapse">
			<svg-icon name="shouqi" v-if="!collapse" size="26" />
			<svg-icon name="zhankai" v-else size="26" />
		</div>
		<AppBreadcrumb />
		<div class="personal_">
			<div class="personal_info_"></div>
			<div class="personal_setting_">
				<el-dropdown @command="handleCommand">
					<div class="username flex items-center">
						<el-avatar class="avatar" :src="defaultAvatar" />
						<span class="ml-3">LSR</span>
					</div>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item command="docu">
								<el-icon>
									<Document />
								</el-icon>
								文档说明
							</el-dropdown-item>
							<el-dropdown-item command="uinfo">
								<el-icon>
									<User />
								</el-icon>
								个人中心
							</el-dropdown-item>
							<el-dropdown-item command="lout">
								<el-icon> <Remove /></el-icon>
								退出登录
							</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</div>
	</el-header>
</template>

<script setup>
import { appStore as useStore } from "@/stores/modules/app";
import { User, Document, Remove } from "@element-plus/icons-vue";
import defaultAvatar from "@assets/images/default_avatar.gif";
const AppBreadcrumb = defineAsyncComponent(() => import("@CORE/layouts/components/AppBreadcrumb/AppBreadcrumb.vue"));

const { logout: loginOut } = userApi();
const store = useStore();

const headerClass = computed(() => {
	return `${store.layout.navbar.type}_`;
});
const props = defineProps({
	collapse: {
		type: Boolean,
		required: true
	}
});

const handleCommand = command => {
	if (command === "lout") {
		loginOut();
	}
};

function Collapse() {
	store.SET_COLLAPSE(!props.collapse);
}
</script>

<style scoped></style>
